import type { ActionType, ProColumns } from '@ant-design/pro-components';
import { ProTable } from '@ant-design/pro-components';
import { request } from '@umijs/max';
import { Image } from 'antd';
import { useRef } from 'react';

const columns: ProColumns[] = [
  {
    title: '设备id',
    dataIndex: 'deviceId',
    copyable: true,
    ellipsis: true,
    width: 160,
  },
  {
    width: 80,
    title: '截图',
    dataIndex: 'screenshot',
    search: false,
    align: 'center',
    render(dom, entity) {
      return entity.screenshot ? <Image src={entity.screenshot} /> : '';
    },
  },
  {
    width: 60,
    title: '方向',
    dataIndex: 'direction',
    valueType: 'select',
    valueEnum: {
      0: '上行',
      1: '下行',
    },
  },
  {
    title: '命令',
    ellipsis: true,
    dataIndex: 'cmdInfo',
    search: false,
    width: 80,
  },
  {
    title: '详情',
    key: 'content',
    dataIndex: 'content',
    ellipsis: true,
    search: false,
  },
  {
    title: 'IP',
    dataIndex: 'ip',
    search: false,
    width: 120,
  },
  {
    title: '地址',
    dataIndex: 'address',
    ellipsis: true,
    search: false,
    width: 80,
  },
  {
    title: '操作系统',
    dataIndex: 'os',
    search: false,
    width: 80,
  },
  {
    title: '浏览器',
    dataIndex: 'browser',
    search: false,
    width: 80,
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    valueType: 'dateTime',
    width: 120,
    search: false,
  },
];

export default () => {
  const actionRef = useRef<ActionType>();
  return (
    <ProTable
      columns={columns}
      actionRef={actionRef}
      cardBordered
      bordered
      request={async (params) => request('/api/log', { params })}
      rowKey="id"
    />
  );
};
